<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <font-awesome-icon icon="fa-solid fa-angle-left" @click="back" />
            <p>确认您的订单</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="title">
                <p>体检人信息</p>
            </div>
            <table>
                <tr>
                    <td>姓名:</td>
                    <td>{{ confirmOrder.user.realName }}</td>
                </tr>
                <tr>
                    <td>证件号码:</td>
                    <td>{{ confirmOrder.user.identityCard }}</td>
                </tr>
                <tr>
                    <td>出生日期:</td>
                    <td>{{ confirmOrder.user.birthday }}</td>
                </tr>
                <tr>
                    <td>手机号码:</td>
                    <td>{{ confirmOrder.user.userId }}</td>
                </tr>
            </table>
            <div class="title">
                <p>体检日期</p>
            </div>
            <table>
                <tr>
                    <td>{{ confirmOrder.orderDate }}</td>
                </tr>
            </table>
            <div class="title">
                <p>体检机构</p>
            </div>
            <table>
                <tr>
                    <td colspan="2">{{ confirmOrder.hospital.name }}</td>
                </tr>
                <tr>
                    <td>营业时间:</td>
                    <td>{{ confirmOrder.hospital.businessHours }}</td>
                </tr>
                <tr>
                    <td>采血截止:</td>
                    <td>{{ confirmOrder.hospital.deadline }}</td>
                </tr>
                <tr>
                    <td>机构电话:</td>
                    <td>{{ confirmOrder.hospital.telephone }}</td>
                </tr>
                <tr>
                    <td>机构地址:</td>
                    <td>{{ confirmOrder.hospital.address }}</td>
                </tr>
            </table>
            <div class="title">
                <p>套餐类型</p>
            </div>
            <table>
                <tr>
                    <td>{{ confirmOrder.setMeal.name }}</td>
                </tr>
            </table>
        </section>

        <div ref="alipayForm"></div>

        <div class="bottom-btn">
            <div class="first">实付款: <span>￥{{ confirmOrder.setMeal.price }}</span></div>
            <div class="last" @click="selectPayment">确认支付</div>
        </div>

        <el-dialog v-model="dialogVisible" title="选择支付方式" width="90%" :before-close="handleClose">
            <div>
                <el-form :model="form">
                    <el-form-item label="支付方式">
                        <el-radio-group v-model="form.paymentMethod">
                            <el-radio label="/ali">支付宝</el-radio>
                            <el-radio label="/other">其他支付</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </span>
        </el-dialog>


        <div class="bottom-ban"></div>
        <Footer></Footer>
    </div>
</template>
<script setup>
import Footer from '@/components/Footer.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
import axios from "../plugin/axiosInstance";
import { reactive, ref } from 'vue';



const router = useRouter();
const route = useRoute();

const dialogVisible = ref(false);
const form = ref({
    paymentMethod: '/ali',
});

const handleClose = () => {
    dialogVisible.value = false;
};

const handleSubmit = () => {
    dialogVisible.value = false;
    axios.post('/order' + form.value.paymentMethod, {
        orderId: confirmOrder.orderId
    }).then(res => {
        if (res.data.code == 200) {
            // 获取后端返回的表单
            alipayForm.value.innerHTML = res.data.data;
            console.log(alipayForm.value);
            window.document.forms[0].submit();
        } else {
            ElMessage({
                type: 'error',
                message: res.data.msg,
                customClass: 'my-message'
            })
            let el = document.querySelector('.my-message');
            if (el) el.style.cssText = '  border: 1px dashed blue;  min-width: 80%;'
        }
    }).catch(err => {
        console.log(err);
    });
};

const confirmOrder = reactive({
    hpId: route.query.hpId,
    orderDate: route.query.orderDate,
    smId: route.query.smId,
    userId: 0,
    orderId: 0,
    hospital: {},
    user: {},
    setMeal: {}
})

const alipayForm = ref(null)


const back = () => {
    ElMessageBox.confirm(
        '您确定要退出支付吗?',
        'Warning',
        {
            confirmButtonText: '是的',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'info',
                message: '支付退出,请尽早支付订单',
            })
            router.back();
        })
        .catch(() => {
            ElMessage({
                type: 'success',
                message: '请继续支付',
            })
        })

}

const getconfirmOrder = () => {


    axios.post("/order/placeOrder", {
        hpId: confirmOrder.hpId,
        smId: confirmOrder.smId,
        orderDate: confirmOrder.orderDate
    }).then(res => {
        if (res.data.code == 200) {
            confirmOrder.hospital = res.data.data.hospital;
            confirmOrder.user = res.data.data.users;
            confirmOrder.setMeal = res.data.data.setmealVo;
            confirmOrder.orderId = res.data.data.orderId;
        }
    });
}


const selectPayment = () => {
    dialogVisible.value = true;

};



const init = () => {
    getconfirmOrder();
}

init();
</script>

<style scoped>
@import "../assets/css/confirmorder.css";
</style>
